<template>
  <div id="container">
    <div id="top">新增</div>
    <div id="content">
      <!-- 表单内容 -->
      <el-form :model="form" style="margin-left: 15rem">
        <el-row>
          <el-col>
            <el-form-item label="优惠券名称:" :label-width="formLabelWidth">
              <el-input
                type="input"
                placeholder="请输入优惠券名称"
                v-model="form.name"
                size="medium"
                style="width: 30rem"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="优惠券类型:" :label-width="formLabelWidth">
              <el-select
                v-model="form.type"
                placeholder="请选择优惠券类型"
                style="width: 30rem"
                size="medium"
              >
                <el-option
                  v-for="item in couponType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="面值:" :label-width="formLabelWidth">
              <el-input
                type="input"
                placeholder="0.01--1000"
                v-model="form.fanceValue"
                size="medium"
                style="width: 25rem; margin-right: 2rem"
              >
              </el-input
              >元
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="使用条件:" :label-width="formLabelWidth">
              <el-radio v-model="form.conditions" label="无限制"
                >无限制</el-radio
              >
              <el-radio v-model="form.conditions" label="满"
                >满<el-input
                  type="input"
                  placeholder="0.01-1000元"
                  v-model="form.conditions2"
                  size="medium"
                  style="width: 11rem; margin-left: 0.5rem"
                >
                </el-input
                >元可使用</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="使用人群:" :label-width="formLabelWidth">
              <el-select
                v-model="form.person"
                placeholder="请选择使用人群"
                style="width: 30rem"
                size="medium"
              >
                <el-option
                  v-for="item in usePerson"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="使用范围:" :label-width="formLabelWidth">
              <el-select
                v-model="form.userRange"
                placeholder="请选择使用范围"
                style="width: 30rem"
                size="medium"
              >
                <el-option
                  v-for="item in userRange"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="选择商品:" :label-width="formLabelWidth">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="small"
                style="margin-right: 1rem"
                @click="addGoods = true"
              >
                选择商品
              </el-button>

              <!-- 点击选择商品后展示的表单 -->
              <el-dialog title="新增商品" :visible.sync="addGoods">
                <el-row>
                  <el-col :span="24">
                    <el-table
                      :data="selectedDish"
                      border
                      style="margin-top: 1rem; width: 100%"
                    >
                      <el-table-column
                        label="菜品名称"
                        width="250"
                        align="center"
                      >
                        <template slot-scope="scope">{{
                          scope.row.name
                        }}</template>
                      </el-table-column>
                      <el-table-column label="价格" width="180" align="center">
                        <template slot-scope="scope">{{
                          scope.row.price
                        }}</template>
                      </el-table-column>
                      <el-table-column label="数量" width="180" align="center">
                        <template slot-scope="scope">{{
                          scope.row.quantity
                        }}</template>
                      </el-table-column>
                      <el-table-column label="操作" align="center">
                        <el-button size="mini" @click="getDishTypeID('汤')"
                          >添加</el-button
                        >
                      </el-table-column>
                    </el-table>
                  </el-col>
                </el-row>

                <!-- 点击添加按钮后的二级弹窗表单 -->
                <el-dialog
                  title="选择菜品"
                  :visible.sync="addNewFood"
                  width="40%"
                  append-to-body
                >
                  <div>
                    <!-- 动态渲染类别标签栏 -->
                    <el-row style="margin-top: 2rem">
                      <el-tabs
                        tab-position="left"
                        style="height: 300px"
                        @tab-click="getDishTypeID"
                      >
                        <el-tab-pane
                          v-for="item in dishTypeTable"
                          :key="item.id"
                          :label="item.category"
                        >
                          <!-- 动态渲染商品 -->
                          <el-radio-group v-model="checkDishList">
                            <el-radio
                              v-for="item in dishFileTable"
                              :key="item.id"
                              :label="item.id"
                              border
                              size="medium"
                              style="margin-top: 1rem; margin-left: 0"
                              >{{ item.name }}
                            </el-radio>
                          </el-radio-group>
                        </el-tab-pane>
                      </el-tabs>
                    </el-row>
                    <el-row style="margin-top: 2rem"> </el-row>
                  </div>

                  <div slot="footer" class="dialog-footer">
                    <el-button @click="addNewFood = false">取 消</el-button>
                    <el-button type="primary" @click="getCheckedDish"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
                <div style="margin-top: 3rem">
                  <el-button
                    type="primary"
                    size="small"
                    @click="addGoods = false"
                    >保存</el-button
                  >
                  <el-button
                    type="danger"
                    size="small"
                    @click="addGoods = false"
                    >取消</el-button
                  >
                </div>
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="开始时间:" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.startTime"
                size="medium"
                style="width: 30rem"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="结束时间:" :label-width="formLabelWidth">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.endTime"
                size="medium"
                style="width: 30rem"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="发行数量:" :label-width="formLabelWidth">
              <el-input
                type="input"
                placeholder="请输入发行数量"
                v-model="form.number"
                size="medium"
                style="width: 30rem"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="每人限领:" :label-width="formLabelWidth">
              <el-input
                type="input"
                placeholder="请输入每人限领张数"
                v-model="form.personLimite"
                size="medium"
                style="width: 30rem"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div id="footer">
        <el-button type="primary" @click="editCoupon"> 确 定 </el-button>
        <router-link to="/main/coupon">
          <el-button>取 消</el-button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: 0,
        name: "",
        fanceValue: "",
        name: "",
        type: "",
        conditions: "",
        conditions2: "",
        startTime: "",
        endTime: "",
        number: "",
        personLimite: "",
        person: "",
        userRange: "",
        releaseStatus: 0,
        goods: "",
        operator: "蟹黄包",
      },
      dishTypeTable: [], //菜品类别
      dishFileTable: [], //菜品档案
      checkDishList: [], //二级菜单中选中的菜品的id
      addGoods: false,
      addNewFood: false,
      selectedDish: [
        //一级dialog下方表格
        {
          id: "",
          dish_no: "",
          name: "",
          price: "",
          status: "",
          quantity: "",
        },
      ],
      couponType: [
        {
          value: "满减券",
          label: "满减券",
        },
        {
          value: "品类券",
          label: "品类券",
        },
        {
          value: "折扣券",
          label: "折扣券",
        },
      ],
      usePerson: [
        {
          value: "会员",
          label: "会员",
        },
        {
          value: "新用户",
          label: "新用户",
        },
        {
          value: "普通商户",
          label: "普通商户",
        },
      ],
      userRange: [
        {
          value: "指定商品",
          label: "指定商品",
        },
        {
          value: "全部商品",
          label: "全部商品",
        },
      ],
      formLabelWidth: "10rem",
    };
  },
  created() {
    // 通过id查询优惠券
    this.getCouponById();
     // 获取菜品类别
    this.getDishType();
    // 获取菜品信息
    this.getDishFile();
  },

  methods: {
    //获取优惠券数据
    async getCouponById() {
      let vid = sessionStorage.getItem("vid");
      const { data: res } = await this.axios.get("/coupon/find/" + vid);
      console.log(res);
      this.form = res.data;
      if (res.data.conditions !== "无限制") {
        this.form.conditions2 = res.data.conditions.match(/\d+(.\d+)?/g)[0];
        this.form.conditions = "满";
      }
      let dishID = parseInt(res.data.goods)
      const {data:r} = await this.axios.get("/dishFile/findById/"+dishID)
      r.data.quantity = r.data.stock
      this.selectedDish[0] = r.data
    },

    // 点击添加按钮修改优惠券信息
    async editCoupon() {
      // 使用条件判断
      if (this.form.conditions == "满") {
        this.form.conditions = "满" + this.form.conditions2 + "元可用";
      }
      if(this.form.userRange == "全部商品"){
        this.form.goods = ""
      }
      // 调用接口添加优惠券
      const { data: res } = await this.axios.post("/coupon/update", {
        id: this.form.id,
        conditions: this.form.conditions,
        endTime: this.form.endTime,
        fanceValue: this.form.fanceValue,
        goods: this.form.goods,
        name: this.form.name,
        number: this.form.number,
        person: this.form.person,
        personLimite: this.form.personLimite,
        releaseStatus: this.form.releaseStatus,
        startTime: this.form.startTime,
        type: this.form.type,
        userRange: this.form.userRange,
        operator: this.form.operator
      });
      console.log(res);
      this.$router.push("/main/coupon");
    },

    // 获取菜品类别
    async getDishType() {
      const { data: res } = await this.axios.post(
        "/dishesCategory/findCategory",
        {
          page: 1,
          pageSize: 999,
        }
      );
      // console.log(res.data);
      this.dishTypeTable = res.data;
      // console.log(this.dishTypeTable);
    },

    // 获取菜品列表
    async getDishFile() {
      const { data: res } = await this.axios.post("/dishFile/list", {
        page: 1,
        pageSize: 999,
      });
      // console.log(res.data);
    },

    // 获取各类别的菜品名
    async getDishTypeID(tab) {
      this.addNewFood = true;
      // 点击标签 获得标签的名字
      let DishTypeName = tab.label;
      // console.log(DishTypeName);
      // 调用类别查询接口,通过名字查询类别的id
      const { data: res } = await this.axios.post("/dishesCategory/list", {
        name: DishTypeName,
      });
      // console.log(res.data);
      // 调用菜品查询接口,通过类别id查询菜品
      let dishTypeID = res.data[0].id;
      // console.log(dishTypeID);
      const { data: r } = await this.axios.post("/dishFile/list", {
        categoryName: dishTypeID,
      });
      // 存储数据
      this.dishFileTable = r.data;
      // console.log(this.dishFileTable);
    },

    // 获取选中菜品信息
    async getCheckedDish() {
      // addNewFood = false
      let did = this.checkDishList;
      // console.log(did);
      let addedDish = this.dishFileTable.filter((x) => x.id === did)[0];
      if (addedDish.status == 0) {
        addedDish.status = "停售";
      } else {
        addedDish.status = "在售";
      }
      // 调用库存接口查询菜品数量
      const { data: res } = await this.axios.get("/stock/" + did);
      console.log(res.data);

      addedDish.quantity = res.data.stock;
      this.form.quantity = res.data.stock;
      this.form.goods = res.data.id
      this.form.dishFileFId = res.data.id;
      // console.log(this.form.dishFileFId);
      // console.log(this.form.quantity);
      // console.log(addedDish);
      this.selectedDish.unshift(addedDish);
      this.selectedDish.splice(1, 1);
      this.addNewFood = false;
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  font-size: 1.5rem;
  height: 3rem;
  line-height: 3rem;
  background-color: lightgray;
}
#top {
  height: 2.5rem;
  line-height: 2.5rem;
  background-color: lightgray;
  // border: 1px solid black;
  padding: 1.5rem;
}
#content {
  background-color: #fff;
  font-size: 1.5rem;
  line-height: 5rem;
  padding: 2.5rem;
}
#footer {
  margin-left: 15rem;
  & button {
    margin-left: 10rem;
  }
}
</style>